<template>
    <div>
        <div class="box">
        <div class="content">
            <div class="login-wrapper">
                <h1>注册</h1>
                <div class="login-form">
                    <div class="username form-item">
                        <span>用户名</span>
                        <input type="text" class="input-item" v-model="user">
                    </div>
                    <div class="email form-item">
                        <span>邮箱</span>
                        <input type="text" class="input-item" v-model="email">
                    </div>
                    <div class="password form-item">
                        <span>密码</span>
                        <input type="password" class="input-item" v-model="password">
                    </div>
                    <button class="login-btn" @click="register()">注 册</button>
                </div>
                <div class="divider">
                    已有账号？<router-link to="/login">登录</router-link>
                </div>
           
                </div>
                
            </div>

            
        </div>
    </div>

  </template>



  <script>

  export default {
    name: 'APP',
    data () {
      return {
        user: '',
        email: '',
        password: '',
      }
    },
    methods: {
      register(){
        //正则验证
        if(!this.user){
          this.$message.error('用户名不能为空');
          return;
        }
        if(!this.email || !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.email)){
          this.$message.error('邮箱格式不正确');
          return;
        }
        if(!this.password || this.password.length < 6){
          this.$message.error('密码长度不能小于6位');
          return;
        }
        //发送请求
        this.$message.success('注册成功');
         localStorage.setItem('user',JSON.stringify({name:this.user,email:this.email,password:this.password}));
          setTimeout(() => {
            this.$router.push('/login');
          }, 1000);
      }
    },
    created () {
    },
    mounted () {
    },
  }

  </script>
  <style lang="less" scoped>
  @charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

/*公共CSS*/
.box {
    width: 100vw;
    height: 100vh;
  background-color: rgb(29, 67, 89);
  
}
.box .content .login-wrapper h1 {
  text-align: center;
}
.box .content .login-wrapper .login-form .form-item {
  margin: 20px 0;
}
.box .content .login-wrapper .login-form .form-item span {
  display: block;
  margin: 5px 20px;
  font-weight: 100;
}
.box .content .login-wrapper .login-form .form-item .input-item {
  width: 100%;
  border-radius: 40px;
  padding: 20px;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: 200;
}
.box .content .login-wrapper .login-form .form-item .input-item:focus {
  outline: none;
}
.box .content .login-wrapper .login-form .login-btn {
  width: 100%;
  border-radius: 40px;
  color: #fff;
  border: 0;
  font-weight: 100;
  margin-top: 10px;
  cursor: pointer;
}
.box .content .login-wrapper .divider {
  width: 100%;
  margin: 20px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box .content .login-wrapper .divider span:nth-child(1) {
  flex: 1;
}
.box .content .login-wrapper .divider span:nth-child(3) {
  flex: 1;
}
.box .content .login-wrapper .divider .line {
  display: inline-block;
  max-width: 30%;
  width: 30%;
}
.box .content .login-wrapper .divider .divider-text {
  vertical-align: middle;
  margin: 0px 20px;
  line-height: 0px;
  display: inline-block;
  width: 100px;
}
.box .content .login-wrapper .other-login-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .content .login-wrapper .other-login-item {
  border: 1px solid rgb(214, 222, 228);
  padding: 10px;
  margin: 10px;
  cursor: pointer;
}


@media (min-width: 767px) {
  .box {
    background-color: rgb(29, 67, 89);
  }
  .box .content {
    width: 85vw;
    height: 90vh;
    background: url("../assets/login_two.jpg") no-repeat;
    background-size: 90% 100%;
    position: absolute;
    right: 15%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background-color: #fff;
  }
  .box .content .login-wrapper {
    width: 25vw;
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
  }
  .box .content .login-wrapper h1 {
    text-align: center;
    font-size: 45px;
    color: rgb(81, 100, 115);
    margin-bottom: 40px;
  }
  .box .content .login-wrapper .login-form {
    margin: 10px 0;
  }
  .box .content .login-wrapper .login-form .form-item span {
    color: rgb(81, 100, 115);
  }
  .box .content .login-wrapper .login-form .form-item .input-item {
    height: 60px;
    border: 1px solid rgb(214, 222, 228);
  }
  .box .content .login-wrapper .login-form .login-btn {
    height: 50px;
    background-color: rgb(59, 72, 89);
    font-size: 20px;
  }
  .box .content .login-wrapper .divider .line {
    border-bottom: 1px solid rgb(214, 222, 228);
  }
  .box .content .login-wrapper .other-login-item {
    border-radius: 20px;
  }
  .box .content .login-wrapper .other-login-item img {
    width: 40px;
    height: 40px;
  }
}


  </style>
  
  